<template>
  <div class="VipCard">
    <div class="card" :style="{'background-image':not}">
      <div class="img imgs">
        <!--<img src="../../assets/img/PunchCard/invalid-name@2x.png" alt="">-->
        <img :src="img" alt="">
      </div>
      <!--<div v-show="!$route.query.share_id">-->
      <!--<div class="div"><p>长按图片保存或分享页面进行打卡</p></div>-->
      <!--<div class="btn" @click="showShare">-->
      <!--立即打卡-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <canvas ref="canvas" ></canvas>
  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        not: 'url(' + require('../../assets/img/PunchCard/bgname@3x2.png') + ')',
        showPrompt: false,
        outPopup: false,
        sharePrompt: false,
        img: require('../../assets/img/PromCard/make.gif'),
        multiple: 1,
        items: {
          chapters: {}
        },
        btnstyle: {
          opacity: 1,
          height: '4rem',
          boxShadow: '0 5px 20px 0 rgba(46, 185, 255, 0.4)'
        },
        btnstyles: {
          opacity: 1,
          height: '4rem',
          border: '1px solid rgb(46, 185, 255)',
          backgroundColor: '#fff',
          color: 'rgb(46, 185, 255)'
        },
        btntexts: '继续读',
        btntext: '返回章节',
        shrepopup: false,
        shares: false,
        outpopup: false
      }
    },
    mounted: function () {
      this.updata()
    },
    methods: {
      updata: function () {
        this.$axios.get_card_order({
          vip_user_id: 1
        }).then(res => {
          this.items = res.data.qing_data
          this.init()
        })
      },
      init: function () {
        var canvas = this.$refs.canvas
        var ctx = canvas.getContext('2d')
        var width = 750 * this.multiple
        var heigth = 1334 * this.multiple
        this.$refs.canvas.width = width
        this.$refs.canvas.height = heigth
        var obj = {
          x: 0,
          y: 0,
          width: width,
          heigth: heigth
        }
        // this.not = 'url(' + this.items.chapters.achievement_card_url + ')'
        // this.newimg(ctx, require('../../assets/img/payState/SunCard.jpg'), obj)
        this.newimg(ctx, this.items.share_card_url, obj)
      },
      newimg: function (ctx, url, obj) {
        var textobj
        var _this = this
        var img = new Image()
        img.crossOrigin = '*'
        img.src = url
        img.onload = function () {
          ctx.drawImage(img, obj.x, obj.y, obj.width, obj.heigth)
          img = new Image()
          img.crossOrigin = '*'
          img.src = _this.items.user_info.avatar
          img.onload = function () {
            ctx.beginPath()
            ctx.save()
            ctx.createPattern(img, 'no-repeat')
            ctx.strokeStyle = '#fff'
            ctx.lineWidth = '4'
            ctx.arc(375 * _this.multiple, 436 * _this.multiple, 70 * _this.multiple, 0, 2 * Math.PI, false)
            ctx.stroke()
            ctx.arc(375 * _this.multiple, 436 * _this.multiple, 70 * _this.multiple, 0, 2 * Math.PI)
            ctx.shadowBlur = 40
            ctx.shadowColor = 'black'
            ctx.fillStyle = 'blue'
            ctx.clip()
            ctx.drawImage(img, 305 * _this.multiple, 366 * _this.multiple, 140 * _this.multiple, 140 * _this.multiple)
            ctx.fillStyle = 'transparent'
            ctx.fill()
            ctx.restore()
            img = new Image()
            img.crossOrigin = '*'
            img.src = _this.items.qr_code
            img.onload = function () {
              ctx.drawImage(img, 255 * _this.multiple, 867 * _this.multiple, 240 * _this.multiple, 240 * _this.multiple)
              // img = new Image()
              // img.src = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="590" height="210" viewBox="0 0 590 210"><foreignObject width = "' + 590 + 'px" height = "' + 210 + 'px" > ' +
              //   '<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0;font-size:' + 30 + 'px;color:#fff; text-align: justify;">' + _this.items.chapters.chapter_soundbite + '</body>' +
              //   '</foreignObject></svg>';
              // img.onload = function () {
              //   ctx.drawImage(img, 80 * _this.multiple, 810 * _this.multiple)
              // var str = _this.items.chapters.chapter_soundbite
              // var stopnum = 0
              // var engnum = 36
              // var y = 810
              // for (var i = 0; i < str.length / 36; i++) {
              //   textobj = {
              //     x: 80 * _this.multiple,
              //     y: y * _this.multiple,
              //     color: '#fff',
              //     content: str.substring(stopnum, engnum).replace(/^\s*/g, ""),
              //     Baseline: 'top',
              //     globala: 1,
              //     font: '400 ' + 36 * _this.multiple + 'px Arial'
              //   }
              //   _this.newtext(ctx, textobj)
              //   stopnum = engnum
              //   engnum += 34
              //   y += 42
              // }
              // // console.log(_this.items.vip_info.nickname.replace(/[^x00-xFF]/g, '**').length)
              // if (escape(_this.items.user_info.nickname).indexOf("%u") < 0) {
              //   textobj = {
              //     x: 375 * _this.multiple,
              //     y: 436 * _this.multiple,
              //     color: '#fff',
              //     content: (_this.items.user_info.nickname).substring(0, 5) + '...',
              //     Baseline: 'top',
              //     Align: 'center',
              //     globala: 1,
              //     font: '400 ' + 30 * _this.multiple + 'px Arial'
              //   }
              //   _this.newtext(ctx, textobj)
              // }
              // else {
              //   if (_this.items.user_info.nickname.length === 4) {
              //     textobj = {
              //       x: 375 * _this.multiple,
              //       y: 546 * _this.multiple,
              //       color: '#fff',
              //       content: (_this.items.user_info.nickname),
              //       Baseline: 'top',
              //       Align: 'center',
              //       globala: 1,
              //       font: '400 ' + 30 * _this.multiple + 'px Arial'
              //     }
              //     _this.newtext(ctx, textobj)
              //   } else {
              //   }
              // }
              textobj = {
                x: 375 * _this.multiple,
                y: 536* _this.multiple,
                color: '#fff',
                content: (_this.items.user_info.nickname),
                Baseline: 'top',
                Align: 'center',
                globala: 1,
                font: '400 ' + 30 * _this.multiple + 'px Arial'
              }
              _this.newtext(ctx, textobj)
              // var str = '已阅读' + _this.items.vip_info.read_days + '天 | 阅读'
              // var stras = _this.items.vip_info.read_words >= 10000 ? (_this.items.vip_info.read_words / 10000).toFixed(1) + '万字' : _this.items.vip_info.read_words + '字'
              // textobj = {
              //   x: 442 * _this.multiple,
              //   y: 130 * _this.multiple,
              //   color: '#fff',
              //   content: str + stras,
              //   Baseline: 'top',
              //   Align: 'center',
              //   globala: 1,
              //   font: '400 ' + 30 * _this.multiple + 'px Arial'
              // }
              // _this.newtext(ctx, textobj)
              _this.saveImageInfo()
              // }
            }
          }
        }
      },
      newtext: function (ctx, textobj) {
        var txet = textobj.content
        ctx.fillStyle = textobj.color
        ctx.textBaseline = textobj.Baseline
        ctx.font = textobj.font
        ctx.textAlign = textobj.Align || ''
        ctx.globalAlpha = textobj.globala
        ctx.fillText(txet, textobj.x, textobj.y)
      },
      saveImageInfo: function () {
        var mycanvas = this.$refs.canvas
        var context = mycanvas.getContext('2d')
        context.scale(2, 2)
        this.img = mycanvas.toDataURL('image/jpg')
        // Indicator.close()
      },
    }
  }
</script>

<style scoped>
  @import "../../assets/css/views/VipCard/index.css";

  .imgs {
    width: 80% !important;
    padding-top: 9% !important;
  }
</style>
